<template>
	<view class="content">
		<view class="bigBox">
			<view class="userBox">
				<image style="width: 60px;border-radius: 50%;" :src="userData.head_icon" mode="widthFix"></image>
				<view class="nameBox">
					<text class="name">{{userData.name}}</text>
					<view style="vertical-align: middle;">
						<text
							class="time">{{userData.v_type==2?"永久会员":userData.v_type==1?todate(userData.vip_end_time):"非会员"}}</text>
						<text
							class="vipLevel">{{userData.v_right_level==2?"月卡会员":userData.v_right_level==3?"季卡会员":userData.v_right_level==4?"年卡会员":userData.v_right_level==5?"终身会员":"未知会员"}}</text>
						<text class="time" style="display: block;">{{"皮蛋:"+userData.pegg}}</text>
					</view>
				</view>
				<image class="vipImg" src="../../static/vip1.png" mode="widthFix"></image>
			</view>

			<view class="vipBox">
				<view v-for="(vipItem,index) in vipList" @click="changeSeleVip(index)"
					:class="index==seleVipIndex?'vipSpan seleVip':'vipSpan'">
					<text class="subscript">{{vipItem.discount.desc}}</text>
					<view class="vipNameBox">
						<image src="../../static/vip2.png" mode="widthFix"></image>
						<text class="vipName">{{vipItem.desc}}</text>
					</view>
					<view class="moneyBox">
						<text>￥</text>
						<text class="saleMoney">{{vipItem.price/100}}</text>
						<text class="oldMoney">{{vipItem.origin_price/100}}</text>
					</view>
				</view>
				<!-- <view class="vipSpan">
					<text class="subscript">买会员送1980皮蛋</text>
					<view class="vipNameBox">
						<image src="../../static/vip2.png" mode="widthFix"></image>
						<text class="vipName">年度会员</text>
					</view>
					<view class="moneyBox">
						<text>￥</text>
						<text class="saleMoney">148</text>
						<text class="oldMoney">350</text>
					</view>
				</view> -->
			</view>

			<view class="couponBox">
				<view class="couponOutBox" @click="changeCoupon(index)" v-for="(couponItem,index) in couponList">
					<view class="coupon">
						<view class="couponSubscript">
							{{"piece动画会员"}}
						</view>
						<span class="couponMoneyBox">
							<text class="t1">￥</text>
							<span class="money2">
								<text class="t2">{{couponItem.money/100}}</text>
							</span>
						</span>
						<span class="couponName">
							<!-- <text class="couponNameText">{{"couponItem.title"}}</text> -->
							<text class="couponNameText">{{couponItem.title}}</text>
							<view class="line"></view>
							<text class="t4">{{"有效期至"+todate(couponItem.endtime)}}</text>
						</span>
						<image class="seleCoupon"
							:src="index==seleCouponIndex?'../../static/选择@3x.png':'../../static/未选择@3x.png'"
							mode="widthFix"></image>
					</view>

				</view>
			</view>
			<view class="btn">
				<button class="payBtn"
					@click="pay">{{"立即支付 ￥" + (couponList[seleCouponIndex]?vipList[seleVipIndex]?.price-couponList[seleCouponIndex]?.money:vipList[seleVipIndex]?.price)/100}}</button>
				<checkbox-group @change="checkPrivacy">
					<label>
						<checkbox value="true" :checked="checkPrivacyFlag" />
						<text class="checkPrivacy" style="margin-left: 10px;">我已阅读并同意</text><text @click="openWebView"
							class="checkPrivacy1"
							style="margin: 0;padding: 0;text-decoration: underline;">《动画会员购买协议》</text>
					</label>
				</checkbox-group>
			</view>
			<view class="tips">
				<text>注意事项：</text>
				<text>会员服务为数字化虚拟产品，一经开通，不支持退款</text>
			</view>
		</view>
		<view class="kefuBox" @click="callKefu">
			<image class="kefu" src="../../static/客服.png" mode="widthFix"></image>
			<text>电话客服</text>
		</view>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<view class="dialogView">
				<text>{{dialogText}}</text>
				<button @click="close">好的</button>
				<!-- <button id="downloadBtn" open-type="openAwemeUserProfile" bindopenawemeuserprofile=""
					data-aweme-id="54569746471">
					去下载
				</button> -->
			</view>

		</uni-popup>
		
		
		<Menu></Menu>
	</view>
</template>

<script>
	import {
		setInfo,
		quit,
		parseUserData
	} from '../../hook/auth.js'
	import api from '../../api/api.js'
	import Menu from "../components/menu.vue"
	export default {
		components:{Menu},
		data() {
			return {
				userData: {}, //用户信息
				vipList: [], //会员列表
				couponList: [], //优惠券列表
				seleVipIndex: 0, //选择的会员
				seleCouponIndex: 999, //使用的优惠券
				checkPrivacyFlag: false, //同意协议
				isIos:false,//是否是ios设备

				dialogText: `到“piece动画”抖音主页
				点击下载应用，开始制作推文`,

			}
		},
		methods: {
			//联系客服
			callKefu(){
				   tt.makePhoneCall({
				      phoneNumber: "18823746745",
				      success(res) {
				        // 调用成功 makePhoneCall:ok
				        console.log("调用成功", res.errMsg);
				      },
				      fail(res) {
				        // 调用失败 makePhoneCall:fail
				        console.log("调用失败", res.errMsg);
				      },
				    });
			},
			dialogConfirm() {
				console.log('点击确认')
				this.openDownload()
			},
			dialogClose() {
				console.log('点击关闭')
				uni.reLaunch({
					url: '/pages/index/index'
				});

			},
			//查看会员协议
			openWebView(e) {
				uni.navigateTo({
					url: '/pages/components/webview?url=https://www.pencil-stub.com/html/tweet/user_vip.html'
				})

			},
			//同意隐私政策
			checkPrivacy() {
				this.checkPrivacyFlag = !this.checkPrivacyFlag
			},
			 checkSystem(){
				 const self = this
				 tt.getSystemInfo({
					success(res) {
					  console.log("getSystemInfo 调用成功1", res);
					  if(res.system.indexOf("iOS")!=-1){
						  self.isIos = true
					  }
					},
					complete(res) {
					  console.log("getSystemInfo 调用完成", res);
					  if(res.system.indexOf("iOS")!=-1){
						  isIos
					  }
					},
				});
			},
			//支付按钮
			async pay() {
				if(this.isIos){
					uni.showToast({
						title: "iOS暂不支持购买",
						icon: "fail"
					})
					return
				}
				if (!this.checkPrivacyFlag) {
					uni.showToast({
						title: "请阅读并同意协议",
						icon: "fail"
					})
					return
				}
				const self = this
				let code = ""
				//获取openId
				 tt.login({
					success(res){
						console.log("登录信息",res)
						code = res.code
					}
				})
				
				uni.showLoading({
					title: "正在唤起支付"
				})
				setTimeout(async()=>{
					let replacedUrl =self.vipList[self.seleVipIndex].consume_url
					if (this.seleCouponIndex != 999) {
						//如果勾选了优惠券，重新获取一次会员列表
						console.log("选择了优惠券")
						 await api.vipList({
							uid: self.userData.id,
							auth_token: self.userData.auth_Token,
							channel_id: 7,
							channel: "douyinApplet",
							spec: {
								"mode": 3,
								"way": [
									1, 2
								],
								"coupon_id":this.couponList[this.seleCouponIndex].id
							},
							"app": {
								"ver_code": 20200000
							},
						}).then(res => {
							console.log("重新获取一次会员列表",res)
							if (res.code == 200) {
								res.data.forEach(val=>{
									if(val.id== self.vipList[self.seleVipIndex].id){
										replacedUrl =  val.consume_url
									}
								})
							}
						
						})
					}
					// 使用正则表达式匹配并替换占位符
					 replacedUrl = replacedUrl.replace(/__UID__/g, this.userData.id)
						.replace(/__AUTH_TOKEN__/g, this.userData.auth_token)
						.replace(/__VERCODE__/g, 100000)
						.replace(/__PAYWAY__/g, 5)
						.replace(/__CHANNEL__/g, "douyinApplet") + "&channel_id=7&code="+code;
					
					console.log("replacedUrl",replacedUrl,"code1",code)
					api.get(replacedUrl).then(res1 => {
						console.log("预下单返回结果", res1);
						uni.hideLoading()
						if (res1.code == 200) {
							console.log("tt.requestOrder",tt.requestOrder)
							tt.requestOrder({
								data:res1.data.nonceStr,
								byteAuthorization:res1.data.sign,
								fail(resFail) {
									console.log("下单失败", resFail)
								},
								success(res2){
									console.log("res2",res2)
									tt.getOrderPayment({
										orderId: res2.orderId,
										success(res3) {
											self.$refs.alertDialog.open()
											if (res3.code == 0) {
												console.log("支付成功", res3)
												let replacedLink = res1.data.notifyUrl
													.replace("__ORDERID__", res1.data.orderId)
													.replace("__UID__", self.userData.id)
													.replace("__AUTH_TOKEN__", self.userData.auth_token)
													.replace("__VERCODE__", 100000);
												api.get(replacedLink).then(res3 => {
													console.log("查询支付结果", res3)
													if (res3.code == 200) {
													}
												})
												// 支付成功处理逻辑，只有res.code=0时，才表示支付成功
												// 但是最终状态要以商户后端结果为准
											}
										},
										fail(resFail) {
											console.log("调起收银台失败处理逻辑", resFail)
											// 调起收银台失败处理逻辑
										},
									});
								}})
							
						} else {
							uni.showToast({
								title: "页面超时，请重新打开会员页面",
								icon: "none"
							})
						}
					})
				},500)
				
			},
			//切换使用的优惠券
			changeCoupon(index) {
				if (this.seleCouponIndex != index) {
					this.seleCouponIndex = index
					this.checkCoupon()
				} else {
					this.seleCouponIndex = 999
				}
			},
			//检查优惠券金额是否大于购买价
			checkCoupon() {
				console.log("seleCouponIndex", this.seleCouponIndex)
				console.log("!this.vipList[this.seleVipIndex]", !this.vipList[this.seleVipIndex])
				console.log("this.couponList[this.seleCouponIndex]", this.couponList[this.seleCouponIndex])
				if (this.seleCouponIndex == 999 || !this.vipList[this.seleVipIndex] || this.couponList[this.seleCouponIndex].money >= this.vipList[this.seleVipIndex].price) {
					uni.showToast({
						title: "优惠券无法用于该套餐",
						icon: "none"
					})
					this.seleCouponIndex = 999
				}
			},
			//下载app
			openDownload() {
				api.get("https://apps.bytesfield.com/download/basic/cur/b284f7066bbe03fbcf34196293794fac1d21e685")
			},
			//获取券列表
			getCouponList() {
				const self = this
				api.couponList({
					"uid": self.userData.id,
					"auth_token": self.userData.auth_token,
					"channel": "douyinApplet",
					"channel_id": 7
				}).then(res => {
					console.log("获取券列表", res)
					if (res.code == 200) {
						self.couponList = res.data
						if(self.couponList.length>0&&self.vipList.length>0){
							self.seleCouponIndex = 0;
							self.checkCoupon()
						}
					}
				})
			},
			//切换选择的会员
			changeSeleVip(index) {
				this.seleVipIndex = index
				this.checkCoupon()
			},
			//获取会员列表
			getVipList() {
				const self = this
				api.vipList({
					uid: self.userData.id,
					auth_token: self.userData.auth_Token,
					channel_id: 3,
					channel: "douyinApplet",
					spec: {
						"mode": 3,
						"way": [
							1, 2
						]
					},
					"app": {
						"ver_code": 20200000
					},
				}).then(res => {
					console.log("会员套餐列表",res)
					if (res.code == 200) {
						//只展示月会员
						if(res.data.length>0){
							self.vipList =[]
							res.data.forEach(val=>{
								self.vipList.push(val);
							})
						}
						// self.vipList = res.data
					}

				})
			},
			//时间戳转换
			todate(time) {
				const date = new Date(time)
				// 获取年、月、日
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
				const day = date.getDate();

				// 可以按需将年、月、日组合成不同格式的日期字符串
				return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}到期`;
			},
			close() {
				this.$refs.alertDialog.close()
			},
		},

		mounted() {
			this.userData = parseUserData()
			this.checkSystem()
			this.getVipList()
			this.getCouponList()
			api.userInfo({spec:{uid:this.userData.id}}).then(res=>{
				if(res.code == 200){
					setInfo(res.data)
				}else{
					quit()
				}
				console.log('更新用户信息',res)
			})
		}
	}
</script>

<style scoped>
		
	.kefuBox text{
		display: block;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0px;
		color: rgba(255, 255, 255, 1);
	}
	.kefu{
		width: 100%;
	}
	.kefuBox{
		text-align: center;
		position: fixed;
		right: 20px;
		bottom: 100px;
		width: 50px;
	}
	#downloadBtn {
		background: rgba(18, 205, 217, 1);
		color: rgba(255, 255, 255, 1);
	}

	.dialogView button {
		display: inline-block;
		width: 100px;
		height: 38px;
		opacity: 1;
		border-radius: 54.5px;
		background: rgba(234, 234, 234, 1);
		margin: 20px;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 1px;
		line-height: 38px;
		color: rgba(128, 128, 128, 1);
		text-align: center;
		vertical-align: top;

	}

	.dialogView text {
		display: block;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28px;
		color: rgba(229, 229, 229, 1);
	}

	.dialogView {
		display: block;
		width: calc(100vw - 40px);
		box-sizing: border-box;
		padding: 20px 0;
		border-radius: 16px;
		background: linear-gradient(178.74deg, rgba(61, 62, 66, 1) 0%, rgba(18, 19, 26, 1) 100%);
		text-align: center;
	}

	.tips {
		margin-top: 20px;
	}

	.tips text {
		display: block;
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 14.48px;
		color: rgba(166, 166, 166, 1);
		text-align: left;
		vertical-align: top;
	}

	.checkPrivacy {
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28px;
		color: rgba(255, 255, 255, 1);
	}

	.checkPrivacy1 {
		/** 文本2 */
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(18, 205, 217, 1);
	}

	.btn {
		width: 100%;
		margin-top: 50px;
		text-align: center;

	}

	.payBtn {
		width: 100%;
		height: 56px;
		border-radius: 32px;
		background: rgba(18, 205, 217, 1);
		line-height: 56px;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.12px;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 20px;
	}

	.seleCoupon {
		width: 14px;
		position: absolute;
		right: 14px;
		border: 14px;
	}

	.couponBox {
		width: 100%;
		position: relative;
		overflow-x: auto;
		white-space: nowrap;
	}

	.line {
		width: 100%;
		height: 0;
		border: 0px;
		margin: 6px 0;
		border-top: 1px solid rgba(218, 177, 111, 1);
	}

	.t4 {
		font-size: 6px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 8px;
		color: rgba(218, 177, 111, 1);
		vertical-align: top;
	}

	.couponNameText {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 18.82px;
		color: rgba(218, 177, 111, 1);
	}

	.couponName {
		position: absolute;
		box-sizing: border-box;
		padding-top: 10px;
		width: 80px;
		right: 20px;
		top: 50%;
		text-align: center;
		transform: translateY(-50%);
	}

	.t2 {
		text-shadow: inset 0px 0.51px 1.01px rgba(196, 150, 75, 1);
		/** 文本1 */
		font-size: 28px;
		font-weight: 600;
		letter-spacing: 0px;
		line-height: 52.42px;
		color: rgba(225, 186, 123, 1);
	}

	.t3 {
		font-size: 12px;
		font-weight: 400;
		display: block;
		margin-top: -14px;
		text-align: center;
	}

	.money2 {
		position: absolute;
		color: rgba(225, 186, 123, 1);
	}

	.couponMoneyBox {
		position: relative;
		display: block;
		width: 40%;
		height: 50px;
		margin-left: 10px;
		line-height: 50px;
		opacity: 1;
		vertical-align: middle;
	}

	.t1 {
		text-shadow: inset 0px 0.51px 1.01px rgba(196, 150, 75, 1);
		/** 文本1 */
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0px;
		line-height: 60px;
		color: rgba(225, 186, 123, 1);
	}

	.couponSubscript {
		left: 18px;
		top: 562px;
		width: 46px;
		height: 12px;
		opacity: 1;
		border-radius: 0px 0px 7px 0px;
		background: linear-gradient(131.55deg, rgba(232, 51, 51, 1) 0%, rgba(252, 126, 63, 1) 100%);

		font-size: 6px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 12px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.coupon {
		width: 90%;
		height: 80px;
		background: linear-gradient(90deg, rgba(255, 239, 214, 1) 0%, rgba(255, 250, 242, 1) 66.06%, rgba(236, 214, 188, 1) 100%);
		box-shadow: 0px 1.01px 2.03px rgba(255, 141, 26, 1);
		margin: 0 auto;
	}

	.couponOutBox {
		display: inline-block;
		margin-right: 20px;
		position: relative;
		width: 55%;
		min-width: 220px;
		height: 90px;
		box-sizing: border-box;
		padding-top: 5px;
		margin-top: 10px;
		opacity: 1;
		border-radius: 8px;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgba(253, 252, 251, 1) 0%, rgba(226, 209, 195, 1) 100%);
	}


	.vipBox .seleVip {
		border: 1px solid rgba(245, 216, 172, 1);
	}

	.vipBox {
		/* width: 100%; */
		height: 200px;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow-x: auto;
	}

	.oldMoney {
		display: block;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28px;
		text-decoration-line: line-through;
		color: rgba(209, 204, 197, 1);
	}

	.saleMoney {
		font-size: 36px;
	}

	.moneyBox {
		width: 100%;
		margin-top: 20px;
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 28px;
		color: rgba(245, 216, 172, 1);
	}

	.vipNameBox {
		padding-top: 20px;
		width: 100%;
		text-align: center;
	}

	.vipName {
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 28px;
		color: rgba(245, 216, 172, 1);
		text-align: right;
		vertical-align: top;
	}

	.vipSpan image {
		width: 26px;
	}

	.subscript {
		display: block;
		position: absolute;
		top: -10px;
		right: 0;
		width: 109px;
		height: 20px;
		opacity: 1;
		border-radius: 15px 15px 0px 15px;
		background: linear-gradient(90deg, rgba(250, 112, 154, 1) 0%, rgba(254, 225, 64, 1) 100%);
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 20px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.vipSpan {
		position: relative;
		display: inline-block;
		margin: 20px 20px 0 0;
		width: 158px;
		height: 158px;
		opacity: 1;
		border-radius: 10px;
		background: rgba(49, 49, 49, 1);
		border: 1px solid rgba(72, 71, 76, 1);
	}

	.vipLevel {
		display: inline-block;
		width: 39px;
		height: 13px;
		opacity: 1;
		border-radius: 74px;
		background: linear-gradient(140.92deg, rgba(236, 205, 146, 1) 0%, rgba(224, 186, 122, 1) 100%);
		/** 文本1 */
		font-size: 7px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 13px;
		color: rgba(34, 34, 34, 1);
		text-align: center;
		vertical-align: middle;
		margin-left: 8px;
	}

	.vipImg {
		position: absolute;
		right: 0;
		top: -40px;
		width: 133.09px;
		height: 133.09px;
	}

	.time {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.46px;
		line-height: 16px;
		color: rgba(128, 128, 128, 1);
		vertical-align: middle;
	}

	.name {
		display: block;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0.69px;
		line-height: 24px;
		color: rgba(255, 255, 255, 1);
	}

	.nameBox {
		margin-left: 20px;
		width: 200px;
		display: inline-block;
		vertical-align: super;
	}

	.userBox {
		margin-top: 20px;
		position: relative;
		width: 100%;
	}

	.bigBox {
		margin: 0 auto;
		width: calc(100% - 50px);
	}

	.content {
		width: 100%;
		height: 100vh;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>